{extend name="public/base" /}
{block name="pjax_container"}
<?php
    $titleTypeName = '事件编辑/添加';
?>
<style>

    .content-header>.breadcrumb>li {
        color: #999;
    }

    .content-header>.breadcrumb>.active {
        color: #666;
    }

    .content-header {
        height: 51px;

    }

    /* .btn-primary {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 5px 10px;
    }

    .box-primary {
        border-top-color: #ecf0f5 !important;
        border-top-width: 16px;

    }

    .btn-primary:hover {
        background-color: #1890FF;
        color: #fff;
        border: none;
        opacity: .9;
        border-radius: 6px !important;
    } */

    .delete-one {
        background-color: ff4141 !important;
        margin-left: 15px;
        border-radius: 6px;
    }

    .sreachs {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 7px 15px;
    }
    .nav-tabs-custom {
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 3px;
    margin-top: 16px;
}
tr>th,td{
    text-align: center;
}
label{
    margin-left: 10px;
}
 .modal-content{
    margin-top: 150px;
   width: 600px;
    height: 700px;

}
.modal-body{
    padding: 27px;
    width: 595px;
    height: 570px;
    display: flex;
}
.modal-right{
    flex: 1;
    height: 104%;
    border: 1px solid #eee;
    margin-left: 30px;
}
.modal-left{
    width: 100%;
    height: 100%;
   
}
.modal-right>h4{
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.form-control{
    border-radius: 6px;
}
.table-body{
    width: 540px;
    height: 470px;
    margin-top: 10px;
    border-radius: 6px;
    background-color: #eee;
}
.table-left{
    margin-right: 2%;
    width: 49%;
         height: 100%;
       float: left;
         border: 1px solid #eee;
    background-color: #fff;
}
.table-right{
       width: 49%;
         height: 100%;
           border: 1px solid #eee;
          float: left;
       background-color: #fff;
}
.layui-tree-entry{
    height: 100%;
    width: 100%;
    padding-right: 10px;
    line-height: 24px;
   
}
.table-right>p{
     text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
}
.table-right>h4{
      text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
   
}
.table-right>p>span{
      text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    width: 80%;
    display: inline-block;
    letter-spacing: 1px;
   
}
.magic-radio,
.magic-checkbox {
	position: absolute;
	display: none;
    
}
 

 
.magic-radio + label,
.magic-checkbox + label {
	position: relative;
	display: block;
	padding-left: 30px;
	cursor: pointer;
 
}
 
.magic-radio + label:before,
.magic-checkbox + label:before {
	position: absolute;
	top: 0px;
	left: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
        margin-top: 5px;
	content: '';
	border: 1px solid #c0c0c0;
}
.magic-checkbox + label:before{
    	top: -5px;
}
.magic-radio + label:after,
  .magic-checkbox + label:after {
	position: absolute;
	display: none;
	content: '';
        margin-top: 5px;
}


 
.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
	display: block;
}
.magic-radio + label:before {
	border-radius: 50%;
}
.magic-radio + label:after {
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3e97eb;
}
.magic-radio:checked + label:before {
	border: 1px solid #3e97eb;
}
.magic-radio:checked[disabled] + label:before {
	border: 1px solid #c9e2f9;
}

.magic-checkbox + label:before {
	border-radius: 3px;
}
.magic-checkbox + label:after {
	top: 2px;
	left: 7px;
	box-sizing: border-box;
	width: 6px;
	height: 12px;
	transform: rotate(45deg);
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
	border-top: 0;
	border-left: 0;
}
.magic-checkbox + label:after {
    top: -2px;
}
.magic-checkbox:checked + label:before {
    border: #1890FF;
    background: #1890FF;
}
.magic-checkbox:checked[disabled] + label:before {
	border: #1890FF;
	background: #1890FF;
}
/*  选择框样式 */
.examine_locked{
    display: flex;
    align-items: center;
    height: 34px;
}
.examine_locked .item_box{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    cursor: pointer;
}
.examine_locked .item_box i{
    display: none;
    color: #fff;
}
.examine_locked .item_box_check{
    background-color: #1890ff;
	border-color: #1890ff;
	color: #1890ff;
}
.examine_locked .item_box_check i {
    display: block;
    content: "\f00c";
}
</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>积分管理</li>
         <li>事件库管理</li>
        <li class="active">{$titleTypeName}</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" method="POST" action="/{$Think.MODULE_NAME}/{$Think.CONTROLLER_NAME}/{$Think.ACTION_NAME}" onsubmit="return false" >
                <input type="hidden" name="id" value="{$info.id|default=0}" />
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="pull-right"><a href="javascript:history.back(-1)" class="btn btn-sm" style="padding:10px 2px;"><i class="fa fa-list"></i> 返回</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                           
                            <div class="form-group">
                                <label class="col-sm-2 control-label">事件名称</label>
                                <div class="col-sm-4">
                                    <input style="border-radius: 6px;" class="form-control" name="name" value="{$info['name']|default=''}" placeholder="事件名称" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">事件分类</label>
                                <div class="col-sm-4">
                                    <input style="border-radius: 6px;" name="cate_name" value="{$info.c_name|default=''}" class="form-control things_type_check" placeholder="请选择事件分类" autocomplete="off" />
                                    <input type="hidden" name="cate_id" value="{$info.cate_id|default=''}" class="form-control things_type_check_id"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">A分</label>
                                <div class="col-sm-4" style="display: flex;">
                                        <input type="number" class="form-control num_check start" name="integral_a_start" value="{$info['integral_a_start']|default=''}" placeholder="" autocomplete="off" />
                                        <span style="display: inline-block;line-height: 34px;margin: 0 5px;">—</span>
                                        <input type="number" class="form-control num_check end" name="integral_a_end" value="{$info['integral_a_end']|default=''}" placeholder="" autocomplete="off" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">B分</label>
                                <div class="col-sm-4" style="display: flex;">
                                    <input type="number" class="form-control num_check start" name="integral_b_start" value="{$info['integral_b_start']|default=''}" placeholder="" autocomplete="off" />
                                    <span style="display: inline-block;line-height: 34px;margin: 0 5px;">—</span>
                                    <input type="number" class="form-control num_check end" name="integral_b_end" value="{$info['integral_b_end']|default=''}" placeholder="" autocomplete="off" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">奖票事件</label>
                                <div class="col-sm-4" style="line-height: 37px;display: flex;">
                                    <input type="radio" class="magic-radio" id="is_lottery_ticket1"  name="is_lottery_ticket" value="1" {if condition="isset($info.is_lottery_ticket) && $info.is_lottery_ticket eq 1"}checked{/if}/>
                                    <label for="is_lottery_ticket1">是</label>
                                       <input type="radio" class="magic-radio" id="is_lottery_ticket2"  name="is_lottery_ticket" value="0" {if condition="isset($info.is_lottery_ticket) && $info.is_lottery_ticket eq 0"}checked{/if}/><label for="is_lottery_ticket2">否</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">计件事件</label>
                                <div class="col-sm-4" style="line-height: 37px;display: flex;">
                                    <input type="radio" class="magic-radio" id="is_piece1"  name="is_piece" value="1" {if condition="isset($info.is_piece) && $info.is_piece eq 1"}checked{/if}/>
                                    <label for="is_piece1">是</label>
                                    <input type="radio" class="magic-radio" id="is_piece2"  name="is_piece" value="0" {if condition="isset($info.is_piece) && $info.is_piece eq 0"}checked{/if}/>
                                    <label for="is_piece2">否</label>
                                </div>
                            </div>
                           
                            <div class="form-group">
                                <label class="col-sm-2 control-label">专人审核</label>
                                <div class="col-sm-4" style="line-height: 37px;display: flex;">
                                    <input class="minimal magic-radio" type="radio" id="is_check1"  name="is_check" value="1" {if condition="isset($info.is_check) && $info.is_check eq 1"}checked{/if}/>
                                    <label for="is_check1">是</label>
                                    <input class="minimal magic-radio" type="radio"  id="is_check2"  name="is_check" value="0" {if condition="!isset($info.is_check) || $info.is_check eq 0"}checked{/if}/>
                                    <label for="is_check2">否</label>
                                </div>
                            </div>
                            <div class="check" {if condition="!isset($info.is_check) || $info.is_check eq 0"}style="display: none;"{/if}>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">初审人</label>
                                    <div class="col-sm-2">
                                        <input style="border-radius: 6px;"
                                               value='{if condition="isset($info.fuser)"}已选择{:count($info.fuser)}人{/if}'
                                               class="form-control first_examine" placeholder="请选择人员" autocomplete="off" />
                                        {if condition="isset($info.fuser)"}
                                        {volist name="$info.fuser" id="fv"}
                                        <input type="hidden" name="first_checked[]" user_name="{$fv.name}" value="{$fv.id}" input_user_num="{$fv.job_number}" apart_name="{$fv.department_name}">
                                        {/volist}
                                        {/if}
                                    </div>

                                    <!-- <div class="examine_locked"><span class="item_box"><i class="fa fa-check"></i></span>锁定</div>
                                    <input type="hidden" name="is_lock_first" class="examine_is_locked"> -->
                                 </div>
                                 <div class="form-group">
                                    <label class="col-sm-2 control-label">终审人</label>
                                    <div class="col-sm-2">
                                        <input style="border-radius: 6px;" value="{if condition="isset($info.luser)"}已选择{:count($info.luser)}人{/if}" class="form-control last_examine" placeholder="请选择人员" autocomplete="off" />
                                        {if condition="isset($info.luser)"}
                                        {volist name="$info.luser" id="lv"}
                                        <input type="hidden" name="last_checked[]" user_name="{$lv.name}" value="{$lv.id}" input_user_num="{$lv.job_number}" apart_name="{$lv.department_name}">
                                        {/volist}
                                        {/if}
                                    </div>
                                    <!-- <div class="examine_locked"><span class="item_box"><i class="fa fa-check"></i></span>锁定</div>
                                    <input type="hidden" name="is_lock_last" class="examine_is_locked"> -->
                                </div>
                            </div>
                            {include file="form/input_textarea" title="备注" name="desc"/}
                        </div>

                    </div>
                    <div class="box-footer">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-4">
                            <div class="btn-group pull-right">
                                <button type="submit" class="btn btn-info pull-right submits" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; 提交">提交</button>
                            </div>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
</section>

<script>
    //监听是否为专审事件
    $("input:radio[name='is_check']").click(function (e) {
        var val = $("input:radio[name='is_check']:checked").val();
        if (val == 1) {
            $(".tab-content .check").show();
        } else {
            $(".tab-content .check").hide();
        }
        // console.log(val);
    });
    // 监听是否锁定
    // $(".examine_locked .item_box").click(function () { 
    //     $(this).toggleClass("item_box_check");
    //     var ischeck = $(this).attr("class");
    //     if (ischeck.indexOf("item_box_check") >= 0) {
    //         $(this).parents(".examine_locked").siblings(".examine_is_locked").val(1);
    //     } else {
    //         $(this).parents(".examine_locked").siblings(".examine_is_locked").val(0);
    //     }
    // });
    // 监听分值范围是否正常
    $(".num_check").change(function (e) { 
        e.preventDefault();
        var item = $(this).parents(".form-group");
        var item_name = item.find(".control-label").html();
        var num_start = item.find(".start").val();
        var num_end = item.find(".end").val();
        if(num_start != "" && num_end != ""){
            if(num_end - num_start < 0){
                layui.layer.msg(item_name+"范围终止值必须大于起始值");
                $(this).val("");
            }
        }
    });
</script>






<!-- 事件分类选择  -->
<link rel="stylesheet" href="__STATIC__/global/an_tree_css/an_tree_css.css">
<!-- Modal 弹出层重写 事件分类选择  -->
<div class="modal fade myModal_things_type" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="height: 633px;width: 510px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel_things">人员选择</h4>
            </div>
            <div class="modal-body" style="width: 504px;">
                <div class="modal-left">
                    <div class="modal-left-title" style="margin-bottom: 20px;">
                        <div class="input-group">
                            <input name="search_user_name" type="text" class="form-control" placeholder="">
                            <span class="input-group-btn">
                                <button class="btn btn-info search_btn" type="button"
                                        style="width: 47px; height: 34px; background-color: #1890FF;border: none;outline: none;">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="input-group table-body" style="width: 450px;">
                        <div class="table-left" style="width: 100%">
                            <div class="an_tree search_hide">

                            </div>
                            <div class="search_show" style="display: flex;  flex-direction: column;padding: 20px 10px;">

                            </div>
                        </div>
                       
                    </div>
                </div>

            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary popups_submit">确认</button>
            </div> -->
        </div>
    </div>
    <!-- <div class="content_tips">
        <p>事件分类：<span>工作类事件/ 日常工作类事件</span></p>
        <p>分值范围：<span>A分:0 ~ 0 B分:100 ~ 200 产值:0 ~ 0</span></p>
        <p>事件属性：<span>专审事件 计件事件</span></p>
        <p><p>备注信息：</p><p><span>暂无备注信息</span></p></p>
    </div> -->
</div>
<!-- 单选弹窗操作 事件分类选择  -->
<script>
    var now_item_name;//名字输入框
    var now_item_id;//id输入框
    //当弹窗关闭时执行重置弹窗
    $('.myModal_things_type').on('hidden.bs.modal', function () {
        // 执行一些动作...重置弹窗
        $(".an_tree_list .an_list_con").html("");
        $(".tree_txt_active").removeClass("tree_txt_active");
        $(".an_tree_pack").hide();
        $(".an_tree .fa").removeClass("fa-caret-down").addClass("fa-caret-right");
        $(".myModal_things_type input[name='search_user_name']").val("");
    });
    // 事件分类选择
    $('.tab-content').on('focus','.things_type_check', function () {
        $('.myModal_things_type').modal('show');
        now_item_name = $(this);
        now_item_id = $(this).siblings(".things_type_check_id");//节点
    });
</script>
<!-- 树结构js操作 事件分类选择  -->
<script>
    $(".myModal_things_type .an_tree").on("click", ".fa", function () {
        $(this).toggleClass("fa-caret-down");
        $(this).toggleClass("fa-caret-right");
        $(this).parents(".an_tree_set").eq(0).children(".an_tree_pack").toggle();
    });
    $(".myModal_things_type").on("click", ".an_tree_txt", function () {
        $('.myModal_things_type').modal('hide');
        $(".things_type_check").val($(this).html());
        $(".things_type_check_id").val($(this).attr("data_id"));
    });
    $(".myModal_things_type").on("click", ".search_btn", function () {
        var item = $(".myModal_things_type .an_tree_txt");
        var search_name = $(".myModal_things_type input[name='search_user_name']").val();
        $(".myModal_things_type .search_show").html("");
        if(search_name == ""){
            $(".myModal_things_type .search_hide").show();
            $(".myModal_things_type .search_show").removeClass("an_tree");
        }else{
            $(".myModal_things_type .search_hide").hide();
            $(".myModal_things_type .search_show").show();
            var content = "";
            for (let i = 0; i < item.length; i++) {
                var name = item.eq(i).html();
                if (name.indexOf(search_name) != -1) {
                    content += item.eq(i).prop("outerHTML");
                }
            }
            $(".myModal_things_type .search_show").append(content)
        }
    })
</script>
<!-- 递归填充目录 事件分类选择  -->
<script>
    var eventList;
    $.ajax({
        type: 'get',
        url: "{:url('base/base_event_cate')}",
        dataType:"json",
        async: false,
        success: function (data) {
            eventList = JSON.parse(data);
        }
    })
    var an_tree = ergodic(eventList);
    $(".myModal_things_type .an_tree").append(an_tree);
    function ergodic(data) {
        var content = '';
        // console.log(data);
        $.each(data, function (index, value) {
            if (value.children != "") {
                var children = ergodic(value.children);
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"><i class="fa fa-caret-right"></i></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.name + '</span></div></div><div class="an_tree_pack">' + children + '</div></div>';
            } else {
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.name + '</span></div></div><div class="an_tree_pack"></div></div>';
            }
        });
        return content;
    }
</script>



<!-- Modal 弹出层重写 多选   -->
<div class="modal fade" id="myModal_multiple" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel10">人员选择</h4>
            </div>
            <div class="modal-body" style="width: 855px;">
                <div class="modal-left" style="width: 540px;">
                    <div class="modal-left-title" style="margin-bottom: 20px;">
                        <div class="input-group">
                            <input type="text" name="search_user_name" class="form-control" placeholder="">
                            <span class="input-group-btn">
                                <button class="btn btn-info search_btn" type="button"
                                    style="width: 47px; height: 34px; background-color: #1890FF;border: none;outline: none;"><span
                                        class="glyphicon glyphicon-search"></span></button>
                            </span>
                        </div>
                    </div>
                    <div class="input-group table-body">
                        <div class="table-left">
                            <div class="an_tree">

                            </div>
                        </div>
                        <div class="table-right">
                            <div class="an_tree_list">
                                <div class="an_list_title">

                                </div>
                                <div class="an_list_con">
                                    <!-- <div class="an_list_item">
                                        <div class="item_info">
                                            <span class="name">aaa</span>/
                                            <span>88</span>/
                                            <span>部门</span>
                                        </div>
                                        <div class="item_box item_box_check"><i class="fa fa-check"></i></div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-right" style="width: 300px;height:524px;">
                    <div class="multiresult_header">
                        <div>已选择<span class="number">0</span>个</div>
                        <div class="header_clear">清空</div>
                    </div>
                    <div class="multiresult_list">
                        <!-- <div class="an_list_item">
                            <div class="item_info">
                                <span class="name">aaa</span>/
                                <span>88</span>/
                                <span>部门</span>
                            </div>
                            <div class="item_box item_box_check"><i class="fa fa-check"></i></div>
                        </div> -->
                        
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary popups_submit" id="submit2">确认</button>
            </div>
        </div>
    </div>
</div>
<!-- 多选弹窗操作  -->
<script>
    var now_item_multiple="";//名字输入框
    var input_name = "";
    var user_type = "";//选择类型为初审还是终审
    //添加初审人
    // $('body').on('focus','.first_examine', function () {
    $('.first_examine').on('focus',function () {
        $('#myModal_multiple').modal('show');
        now_item_multiple=$(this);
        input_name = "first_checked[]";
        user_type = 1;
        new_right_add();
        check_all();
    });
    // $('body').on('focus','.last_examine', function () {
    $('.last_examine').on('focus', function () {
        $('#myModal_multiple').modal('show');
        now_item_multiple=$(this);
        input_name = "last_checked[]";
        user_type = 2;
        new_right_add();
        check_all();
    });
     //确认按钮
    $('#myModal_multiple .popups_submit').click(function (e) {
        $('#myModal_multiple').modal('hide');
        var check_all = $("#myModal_multiple .multiresult_list .an_list_item");
        var content="";
        for (let i = 0; i < check_all.length; i++) {
            var input_value = check_all.eq(i).attr("user_id");
            var input_limits_b = check_all.eq(i).attr("limits_b");
            var input_user_name = check_all.eq(i).attr("user_name");
            var input_user_num = check_all.eq(i).find(".item_info span").eq(1).html();
            var input_apart_name = check_all.eq(i).find(".item_info span").eq(2).html();
            content += '<input type="hidden" name="'+input_name+'" user_name="'+input_user_name+'" value="'+input_value+'" user_name="'+input_user_name+'" input_user_num="'+input_user_num+'" apart_name="'+input_apart_name+'" limits_b="'+input_limits_b+'">';
        }
        now_item_multiple.siblings("input").remove();
        now_item_multiple.after(content);
        now_item_multiple.val("已选择"+check_all.length+"人");
    });
    //当弹窗关闭时执行重置弹窗
    $('#myModal_multiple').on('hidden.bs.modal', function () {
        //执行一些动作...重置弹窗
        $(".an_tree_list .an_list_title").html("");
        $(".an_tree_list .an_list_con").html("");
        $(".tree_txt_active").removeClass("tree_txt_active");
        $(".an_tree_pack").hide();
        $(".an_tree .fa").removeClass("fa-caret-down").addClass("fa-caret-right");
        $("#myModal_multiple input[name='search_user_name']").val("");
        $("#myModal_multiple .header_clear").click();
    });
    //已选择，再进行补充选择时添加右侧选中
    function new_right_add(){
        var input = now_item_multiple.siblings("input");
        var content = "";
        for (let i = 0; i < input.length; i++) {
            input.eq(i).attr("");
            content += '<div class="an_list_item " user_name="'+input.eq(i).attr("user_name")+'" user_id="'+input.eq(i).attr("value")+'" limits_b="'+input.eq(i).attr("limits_b")+'"><div class="item_info"><span class="name">'+input.eq(i).attr("user_name")+'</span>/<span>'+input.eq(i).attr("input_user_num")+'</span>/<span>'+input.eq(i).attr("apart_name")+'</span></div><div class="item_box "><i class="fa fa-remove"></i></div></div>'
        }
        $("#myModal_multiple .multiresult_list").append(content);
    }
</script>
<!-- 树结构js操作 多选  -->
<script>
    $("#myModal_multiple .an_tree").on("click", ".fa", function () {
        $(this).toggleClass("fa-caret-down");
        $(this).toggleClass("fa-caret-right");
        $(this).parents(".an_tree_set").eq(0).children(".an_tree_pack").toggle();
    });
    //添加中间人员列表
    $("#myModal_multiple").on("click", ".an_tree_txt,.search_btn", function () {
        $(".an_tree").find(".tree_txt_active").removeClass("tree_txt_active");
        $(this).addClass("tree_txt_active");
        var department_id = $(this).attr("data_id");
        var department_name = $(this).html();
        var user_name = $("#myModal_multiple input[name='search_user_name']").val();

        // 初审人数组
        var first_checked_input = $("input[name='first_checked[]']");
        var first_check_user_id = [];
        for (let i = 0; i < first_checked_input.length; i++) {
            first_check_user_id.push(first_checked_input.eq(i).val());
        }
        // 终审人数组
        var last_checked_input = $("input[name='last_checked[]']");
        var last_check_user_id = [];
        for (let i = 0; i < last_checked_input.length; i++) {
            last_check_user_id.push(last_checked_input.eq(i).val());
        }
        console.log(last_check_user_id);
        $.ajax({
            type: 'get',
            url: "{:url('base/base_department_per')}",
            data: {'department_id' : department_id,'user_name' : user_name,'first_check_user_id' : first_check_user_id,'last_check_user_id' : last_check_user_id,'user_type': user_type},
            dataType:"json",
            success: function (data) {
                // var json = JSON.parse(data);
                // console.log(data);
                var content = '';
                $.each(data, function (index, value) {
                    if(value.limits==undefined){
                         var limits=0;
                    }else{
                        var limits=value.limits.b;
                    }
                    content += '<div class="an_list_item" user_name="'+value.name+'" user_id="'+value.id+'" limits_b="'+limits+'"><div class="item_info"><span class="name">' + value.name + '</span>/<span>' + value.job_number + '</span>/<span>' + value.department_name + '</span></div><div class="item_box "><i class="fa fa-check"></i></div></div>'
                });
                $('#myModal_multiple .an_list_con').html("");
                $('#myModal_multiple .an_list_con').append(content);
                $('#myModal_multiple .an_list_title').html('<div>'+department_name + data.length + '人</div><div class="all_item_box"><i class="fa fa-check"></i></div>');
                left_add_active();
                check_all();
            }
        })
    });
    // 选中事件
    $("#myModal_multiple .an_tree_list").on("click", ".an_list_item", function () {
        $(this).toggleClass("list_item_check");
        var ischeck = $(this).attr("class");
        if (ischeck.indexOf("list_item_check") >= 0) {
            add_check();
        } else {
            del_check($(this).attr("user_id"));
        }
        check_all();
    });
    //全选按钮
    $("#myModal_multiple .an_tree_list").on("click", ".all_item_box", function () {
        $(this).toggleClass("all_item_box_check");
        var ischeck = $(this).attr("class");
        var all_item = $("#myModal_multiple .an_tree_list .an_list_item");
        if (ischeck.indexOf("all_item_box_check") >= 0) {
            all_item.addClass("list_item_check");
            add_check();
        } else {
            all_item.removeClass("list_item_check")
            for (let i = 0; i < all_item.length; i++) {
                del_check(all_item.eq(i).attr("user_id"));
            }
        }
        check_all();
    });
    //右侧删除事件
    $("#myModal_multiple .multiresult_list").on("click", ".item_box", function () {
        var user_id = $(this).parents(".an_list_item ").attr("user_id");
        del_check(user_id);
        check_all();
    });
    //右侧清空监听
    $("#myModal_multiple .multiresult_header").on("click", ".header_clear", function () {
        var all_item = $("#myModal_multiple .multiresult_list .an_list_item");
        for (let i = 0; i < all_item.length; i++) {
            del_check(all_item.eq(i).attr("user_id"));
        }
        check_all();
    });
    //全选按钮检测
    function check_all(){
        var all_item_num = $("#myModal_multiple .an_tree_list .an_list_item").length;
        var checked_item_num = $("#myModal_multiple .an_tree_list .list_item_check").length;
        if(all_item_num != 0 && all_item_num == checked_item_num){
            $("#myModal_multiple .an_tree_list .all_item_box").addClass("all_item_box_check");
        }else{
            $("#myModal_multiple .an_tree_list .all_item_box").removeClass("all_item_box_check");
        };
        //右侧选中人数统计
        var people_num = $("#myModal_multiple .multiresult_list .an_list_item").length;
        $("#myModal_multiple .multiresult_header .number").html(people_num);
    };
    //添加右侧选中项
    function add_check(){
        var item_ids = [];
        var all_checked_item = $("#myModal_multiple .an_list_con").find(".list_item_check");
        var now_checker_item = $("#myModal_multiple .multiresult_list .an_list_item");
        for (let i = 0; i < now_checker_item.length; i++) {
            item_ids.push(now_checker_item.eq(i).attr("user_id"));
        }
        for (let i = 0; i < all_checked_item.length; i++) {
            var now_id = all_checked_item.eq(i).attr("user_id");
            if ( $.inArray(now_id,item_ids) < 0 ) {
                var new_item = all_checked_item.eq(i).prop("outerHTML");
                new_item = new_item.replace("fa-check","fa-remove");
                new_item = new_item.replace("list_item_check","");
                $("#myModal_multiple .multiresult_list").append(new_item);
            } 
        }
        // console.log(item_ids);
    }
    //左侧第一次生成时检测是否有选中项
    function left_add_active(){
        var left_item_ids = [];
        var left_checked_item = $("#myModal_multiple .an_list_con .an_list_item");
        var right_checker_item = $("#myModal_multiple .multiresult_list .an_list_item");
        for (let i = 0; i < left_checked_item.length; i++) {
            left_item_ids.push(left_checked_item.eq(i).attr("user_id"));
        }
        for (let i = 0; i < right_checker_item.length; i++) {
            var user_id = right_checker_item.eq(i).attr("user_id");
            if ( $.inArray(user_id,left_item_ids) >= 0 ) {
                $("#myModal_multiple .an_list_con .an_list_item[user_id="+user_id+"]").addClass("list_item_check");
            }
        }  
    }
    //取消选中项
    function del_check(user_id){
        var left_item_ids = [];
        var right_item_ids = [];
        var left_checked_item = $("#myModal_multiple .an_list_con .an_list_item");
        var right_checker_item = $("#myModal_multiple .multiresult_list .an_list_item");
        for (let i = 0; i < left_checked_item.length; i++) {
            left_item_ids.push(left_checked_item.eq(i).attr("user_id"));
        }
        for (let i = 0; i < right_checker_item.length; i++) {
            right_item_ids.push(right_checker_item.eq(i).attr("user_id"));
        }
        if ( $.inArray(user_id,left_item_ids) >= 0 ) {
           $("#myModal_multiple .an_list_con .an_list_item[user_id="+user_id+"]").removeClass("list_item_check");
        }
        if ( $.inArray(user_id,right_item_ids) >= 0 ) {
            $("#myModal_multiple .multiresult_list .an_list_item[user_id="+user_id+"]").remove();
        }
    }
</script>
<!-- 递归填充目录 多选  -->
<script>
    var department = "";
    $.ajax({
        type: 'get',
        url: "{:url('base/base_department_page')}",
        dataType:"json",
        async: false,
        success: function (data) {
            // eventList = JSON.parse(data);
            department = data;
        }
    })
    var an_tree = ergodic(department)
    $("#myModal_multiple .an_tree").append(an_tree);
    function ergodic(data) {
        var content = '';
        $.each(data, function (index, value) {
            if (value.children != "") {
                var children = ergodic(value.children);
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"><i class="fa fa-caret-right"></i></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack">' + children + '</div></div>';
            } else {
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack"></div></div>';
            }
        });
        return content;
    }
</script>


{/block}
